<template>
	<view class="userLayout pageBg">
		<view class="userInfo">
			<view class="avatar">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image v-if="userStore.user.avatar" :src="userStore.user.avatar" mode="aspectFill"></image>
					<image v-else src="../../static/images/logo.png" mode="aspectFill"></image>
				</button>
			</view>
			<view class="address" v-if="userStore.user.name">{{ userStore.user.name }}</view>
			<view class="address" v-else>智护康途</view>
		</view>




		<view class="section">
			<view class="list">

				<view class="row" @click="goPerson">
					<view class="left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<view class="text">我的信息</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

				<view class="row" @click="goHistoryOrder">
					<view class="left">
						<uni-icons type="download-filled" size="20"></uni-icons>
						<view class="text">我的预约</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>



				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="clickContact">拨打电话</button>
					<!-- #endif -->


				</view>
			</view>
		</view>

		<view class="section">
			<view class="list">
				<view class="row">
					<view class="left">
						<uni-icons type="notification-filled" size="20"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

				<view class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<view class="text"></view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/stores/index.js';
	import {
		uploadAvatar
	} from '@/api/uploadFileapi.js'

	const userStore = useUserStore();

	const onChooseAvatar = (e) => {
		// console.log(userStore.user);
		// console.log(e)

		uploadAvatar({
			filePath: e.detail.avatarUrl,
			name: 'avatar'
		}).then(res => {
			// console.log(res);
			userStore.user.avatar = res;
			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});
		}).catch(err => {
			console.log("err", err);
		})

	}

	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: "114"
		})
	}

	// 跳转到历史订单页面
	const goHistoryOrder = () => {
		uni.navigateTo({
			url: '/pages/historyOrder/historyOrder'
		})
	}

	// 跳转到个人信息页面
	const goPerson = () => {
		uni.navigateTo({
			url: '/pages/person/person'
		})
	}
</script>

<style lang="scss" scoped>
	.userLayout {
		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 50rpx 0;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				overflow: hidden;

				.avatar-wrapper {
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					// // border: none; // 去掉默认边框（不要）
					background: none; // 去掉默认背景
					outline: none; // 消除默认点击蓝色边框效果

					&::after {
						border: none; // 去掉默认边框，要这样不然又边线出现
					}

					image {
						width: 100%;
						height: 100%;

					}
				}


			}

			.address {
				font-size: 33rpx;
				color: #aaa;
				padding: 20rpx 0;
			}
		}

		.section {
			width: 700rpx;
			margin: 30rpx auto;
			border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			.list {
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 100rpx;
					border-bottom: 1px solid #eee;
					position: relative;
					background: #fff;

					&:last-child {
						border-bottom: 0
					}

					.left {
						display: flex;
						align-items: center;

						:deep() {
							.uni-icons {
								color: $brand-theme-color !important;
							}
						}

						.text {
							padding-left: 20rpx;
							color: #666
						}
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #aaa;

						}
					}

					button {
						position: absolute;
						top: 0;
						left: 0;
						height: 100rpx;
						width: 100%;
						opacity: 0;
					}
				}
			}
		}
	}
</style>